<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!--
         基本知识：
         计算属性依赖data属性，由data中的属性计算得来的
         1、计算属性也是vue实例对象上的属性，可以通过实力对象.xx方式获取
         2、计算属性中的值，依赖data中的值，当data中的值发生改变时，计算属性也发生改变
         3、某些时候，计算属性和方法是可以达到相同的效果的，但是计算属性有缓存，如果使用，直接调用即可，如果data中的值发生变化，才会重新执行，而方法，用一次，执行一次，对于高频率操作，方法开销就比较大
     -->
     <div class="box">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        姓名：<input type="text" v-model="fullName">
     </div>
     <script>
        let vm = new Vue({
            el:'.box',
            data:{
                firstName:'上官',
                lastName:'婉儿'
            },
            //设置计算属性
            computed:{
                fullName:{
                    get(){
                        return this.firstName + '-' + this.lastName
                    },
                    //劫持数据  当fullName 改变时会触发 value就是改变后的值
                    set(value){
                        let arr = value.split('-');
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        })
     </script>
</body>
</html>